<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>03-标签内的属性和数组</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			#max_box{
				width:500px;
				margin:100px auto;
			}
			#box{
				width:500px;
				height:50px;
				background:#2a89de;
			}
			#box h2{
				float:left;
				width:80px;
				line-height:50px;
				text-align:center;
			}
			#box #search{
				float:left;
				display:none;
				top:0;
				left:80px;
				width:350px;
				height:30px;
				margin-top:10px;
			}
			#box #search input{
				float:left;
				width:300px;
				height:30px;
				background:#fff;
				border:none;
				outline:none;
			}
			#box #search #search_add{
				float:right;
				width:50px;
				height:30px;
				background:#f66;
				font-size:16px;
				text-align:center;
				line-height:30px;
				cursor:pointer;
			}
			#box #newsadd{
				float:right;
				width:50px;
				height:50px;
				text-align:center;
				line-height:50px;
				font-size:24px;
				cursor:pointer;
			}
			#dis{
				box-sizing:border-box;
				width:500px;
				background:#f66;
				font-size:16px;
			}
		</style>
	</head>
	<body>
		<div id="max_box">
			<div id="box">
				<h2>新闻动态</h2>
				<div id="search">
					<input id="search_input" type="text" />
					<div id="search_add">添加</div>
				</div>
				<div id="newsadd">+</div>
			</div>	
			<div id="dis"></div>
		</div>
		<script type="text/javascript">
			var news =document.getElementById("newsadd");
			var adds =document.getElementById("search_add");
			var sc =document.getElementById("search");
			var s_input = document.getElementById("search_input");
			var addnew = document.getElementById("dis");
			news.onclick = function(){
				sc.style.display="block";
			}
			adds.onclick = function(){
				if(s_input.value){
					addnew.innerHTML += "<p style='border-bottom:1px solid blue;'>"+s_input.value+"</p>";
					addnew.style.border="1px solid #111";
					addnew.style.borderTop="1px solid #2a89de";
				}
			}		
		</script>	
	</body>
</html>
